<template>
	<view class="pageItem">
		<view class="head">
			<view class="h_con">
				<!-- <view class="msg">
					<view class="m_t1">
						{{$t('team.team_number')}}
					</view>
					<view class="m_num">{{user.one_num + user.two_num}}</view>
				</view> -->
				<view class="msg">
					<view class="m_t1">{{$t('team.title02')}}</view>
					<view class="m_num">{{user.two_num}}</view>
				</view>
				<view class="msg">
					<view class="m_t1">{{$t('team.title03')}}</view>
					<view class="m_num">{{user.one_num}}</view>
				</view>
			</view>
			<view class="h_total">
				<view class="total">
					<view class="to_t1">{{$t('team.my_harvest')}}</view>
					<view class="to_num">
						<view class="num">{{user.total_money}}</view>
						<image class="img" src="/static/other/diamond_mini.png" mode="widthFix"></image>
					</view>
				</view>
				<view class="total">
					<view class="to_t1">{{$t('team.team_harvest')}}</view>
					<view class="to_num">
						<view class="num">{{user.team_money}}</view>
						<image class="img" src="/static/other/diamond_mini.png" mode="widthFix"></image>
					</view>
				</view>
			</view>
		</view>
		<view class="main">
			<view class="main_con">
				<view class="m_tit">{{$t('team.team_detail')}}</view>
				<scroll-view class="list_item" scroll-y :show-scrollbar="false" enhanced @scrolltolower="loadMore">
					<block v-for="(item,index) in list" :key="'r_'+index">
						<view class="row" @click.stop="lookTeam" :data-item="item">
							<view class="r_con">
								<view class="r_c_t1">{{item.nickname}}</view>
								<view class="r_c_t2">{{item.create_at}}</view>
							</view>
							<view class="r_msg">
								<view class="r_num">{{item.team_num || 0}}<label
										class="iconfont r_logo">&#xe6b6;</label></view>
								<view class="r_price">
									{{item.total_money}}
									<image class="img" src="/static/other/diamond_mini.png" mode="widthFix"></image>
								</view>
							</view>
						</view>
					</block>
				</scroll-view>
				<block v-if="empty_show">
					<view
						style="width:100%;margin-top: 20vw;position: absolute;top: 50%;left: 50%;transform: translate(-50%, -90%);"
						v-if="list.length==0">
						<u-empty mode="list" iconSize="120" :text="$t('nodata')"></u-empty>
					</view>
				</block>
			</view>
		</view>

		<view class="mask" :class="t_mask ? 'mask_active':''">
			<view class="mask_item">
				<view class="mask_box mask_box_con" :class="t_mask ? 'mask_box_active_center':''">
					<view class="t_tit">{{$t('team.team_man')}} ({{two_list.length||0}})</view>
					<view class="t_tit2">
						<view class="name">
							{{team_item.nickname}}
						</view>
						<view class="price">
							{{team_item.total_money}}
							<image class="img" src="/static/other/diamond_mini.png" mode="widthFix"></image>
						</view>
					</view>
					<scroll-view class="t_list" scroll-y>
						<block v-for="(item,index) in two_list" :key="item.id">
							<view class="t_row">
								<view class="t_r_index">{{index+1}}</view>
								<view class="t_r_con">
									<view class="t_r_t1">{{item.nickname}}</view>
									<view class="t_r_t2">{{item.create_at}}</view>
								</view>
								<view class="t_r_num">
									{{item.total_money}}
									<image class="img" src="/static/other/diamond_mini.png" mode="widthFix"></image>
								</view>
							</view>
						</block>
					</scroll-view>
					<view class="t_btn">
						<view class="btn" @click.stop="maskChange(false)">{{$t('use.close')}}</view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import helper from '@/common/helper';
	export default {
		data() {
			return {
				user: {
					one_num: 0,
					two_num: 0,
					total_money: 0,
					team_money: 0
				},
				load_type: 'more',
				loading: 0,
				empty_show: 0,
				page: 1,
				list: [

				],
				two_list: [],
				t_mask: false,

				team_item: '',
			};
		},
		onReachBottom() {
			this.loadData();
		},
		onLoad() {
			this.initData();
			this.loadData();
		},
		methods: {
			initData() {
				let url = this.site_url + 'api/auth/team/my_team_init';
				this.areq(url).then(res => {
					if (res.code == 1) {
						this.user = res.data;
					}
				})

			},
			loadData() {
				if (this.load_type === 'loading' || this.load_type === 'no_more') {
					//防止重复加载
					return;
				}
				this.load_type = 'loading';
				let url = this.site_url + 'api/auth/team/team_list?page=' + this.page;
				this.areq(url).then(res => {
					this.empty_show = 1;
					this.loading = 1;
					if (res.code == 1) {
						this.page++;
						this.list = [...this.list, ...res.data];
						if (res.data.length == 10) {
							this.load_type = 'more';
						} else {
							this.load_type = 'no_more';
						}
					} else {
						this.load_type = 'no_more';
					}
				})
			},
			lookTeam(e) {
				this.team_item = e.currentTarget.dataset.item;
				let num = this.team_item.team_num || 0;
				if (num > 0) {
					this.load_two_list(this.team_item.id);
				}

			},
			load_two_list(uid) {
				uni.showLoading({
					title: this.$t('acc.loading'),
					mask: true
				});
				helper.Timer.start();
				let url = this.site_url + 'api/auth/team/two_list?id=' + uid;
				this.areq(url).then(res => {
					helper.Timer.stop();
					let left_time = helper.Timer.getLeftTime(1200);
					setTimeout(() => {
						uni.hideLoading();
						if (res.code == 1) {
							this.two_list = res.data;
							setTimeout(() => {
								this.maskChange(true);
							}, 200);
						}
					}, left_time);
				})
			},
			maskChange(_flag) {
				this.t_mask = _flag;
				if (!_flag) {
					this.team_item = '';
				}
			},
			loadMore() {
				// console.log('更多数据')
				this.loadData();
			}
		}
	}
</script>

<style lang="scss">
	.head {
		width: 100%;
		position: fixed;
		z-index: 98;
		padding: calc(var(--status-bar-height) + 4vw) 4% 3vw;
		background: $main_bg_color;

		.h_con {
			width: 100%;
			display: flex;
			align-items: center;
			flex-wrap: wrap;
			position: relative;
			background: linear-gradient(90deg, #FF3748 0%, #FB3E38 100%);
			padding: 3vw;
			border-radius: 3vw;

			.msg {
				width: 50%;
				text-align: center;

				.m_t1 {
					width: 100%;
					font-size: 3.5vw;
					color: #fff;
				}

				.m_num {
					width: 100%;
					font-size: 5vw;
					font-weight: bold;
					color: #fff;
					padding-top: 1vw;
				}
			}

			.code {
				font-size: 14vw;
				font-weight: bold;
				color: #FFD163;
				position: absolute;
				bottom: -1vw;
				right: 2vw;
			}
		}

		.h_total {
			width: 100%;
			display: flex;
			align-items: center;
			margin-top: 3vw;

			.total:not(:first-child) {
				margin-left: 3vw;
			}

			.total {
				flex: 1;
				justify-content: space-between;
				background: linear-gradient(90deg, #FF3748 0%, #FB3E38 100%);
				padding: 3vw;
				border-radius: 3vw;

				.to_t1 {
					width: 100%;
					font-size: 3.5vw;
					color: #fff;
				}

				.to_num {
					display: flex;
					align-items: center;
					width: 100%;
					padding-top: 1vw;

					.num {
						font-size: 4vw;
						color: #fff;
					}

					.img {
						width: 4vw;
						margin-left: 1.5vw;
					}
				}
			}
		}
	}

	.main {
		width: 100%;
		position: relative;
		z-index: 2;
		padding: calc(var(--status-bar-height) + 46vw) 4% 0;

		.main_con {
			@include card_style();

			.m_tit {
				width: 100%;
				padding: 0 0 2vw;
				border-bottom: 1rpx solid #707070;
				font-size: 4.3vw;
				font-weight: bold;
				color: $main_color_s2;
			}

			.list_item {
				width: 100%;
				height: calc(100vh - var(--status-bar-height) - 83vw);
				margin-top: 3vw;

				.row:not(:first-child) {
					margin-top: 2vw;
				}

				.row {
					width: 100%;
					padding: 2vw 0;
					display: flex;
					align-items: center;

					.r_con {
						flex: 1;

						.r_c_t1 {
							width: 100%;
							font-size: 4vw;
							font-weight: bold;
							color: $main_color5;
							@include text_over_style(1);
						}

						.r_c_t2 {
							width: 100%;
							color: $main_color4;
							font-size: 3.3vw;
							padding-top: 2vw;
						}
					}

					.r_msg {
						display: flex;
						flex-direction: column;
						padding-left: 3vw;

						.r_num {
							font-size: 4vw;
							color: $main_color;
							text-align: right;

							.r_logo {
								font-size: 4vw;
								color: $main_color;
								margin-left: 2vw;
							}
						}

						.r_price {
							font-size: 3.3vw;
							padding-top: 2vw;
							color: $main_color5;
							text-align: right;

							.img {
								width: 3vw;
								margin-left: 1vw;
							}
						}
					}
				}
			}
		}
	}

	@include animation_mask_style();

	.mask {
		.mask_item {
			display: flex;
			align-items: center;
			justify-content: center;
			padding-bottom: 10vw;
		}

		.mask_box_con {
			width: 90%;
			position: relative;
			border-radius: 3vw;
			border: none;
			padding: 0 4vw 4vw;
			background: $main_color2_s;

			.t_tit {
				width: 100%;
				font-size: 4.3vw;
				font-weight: bold;
				color: $main_color_s2;
				padding: 4vw 0;
				text-align: center;
			}

			.t_tit2 {
				width: 100%;
				display: flex;
				align-items: center;
				padding: 1vw 0 3vw;
				border-bottom: 1rpx solid #999;

				.name {
					flex: 1;
					font-size: 4vw;
					font-weight: bold;
					color: $main_color_s2;
				}

				.price {
					font-size: 3.8vw;
					color: $main_color5;
					text-align: right;

					.img {
						width: 3vw;
						margin-left: 1vw;
					}
				}
			}

			.t_list {
				width: 100%;
				padding: 2vw;
				background: $main_color2;
				max-height: 50vh;
				overflow: hidden;
				display: inline-block;

				.t_row {
					width: 100%;
					display: flex;
					align-items: center;
					margin-bottom: 3vw;
					padding-left: 8vw;
					position: relative;

					.t_r_index {
						width: 8vw;
						position: absolute;
						left: 0;
						font-size: 3.6vw;
						color: $main_color5;
						top: 50%;
						transform: translateY(-50%);
					}

					.t_r_con {
						flex: 1;
						margin-left: 1vw;

						.t_r_t1 {
							font-size: 4vw;
							font-weight: bold;
							color: $main_color_s2;
							@include text_over_style(1);
						}

						.t_r_t2 {
							font-size: 3vw;
							color: $main_color4;
						}
					}

					.t_r_num {
						font-size: 3.3vw;
						color: $main_color5;
						text-align: right;

						.img {
							width: 3vw;
							margin-left: 1vw;
						}
					}
				}
			}

			.t_btn {
				width: 100%;
				display: flex;
				justify-content: center;
				margin-top: 5vw;

				.btn {
					width: 50vw;
					height: 11vw;
					background: $main_color;
					color: #ffffff;
					font-size: 4vw;
					line-height: 11vw;
					text-align: center;
					border-radius: 6vw;
				}
			}
		}
	}
</style>